import React, { useState, useEffect, useRef } from 'react';
import './BannerCarousel.css';

const banners = [
  {
    img: 'https://your-image-url-1.jpg',
    alt: '热血铸军魂',
  },
  {
    img: 'https://js.ibaotu.com/act/25/07/16/687712724b99f.png',
    alt: '示例图片2',
  },
  {
    img: 'https://your-image-url-3.jpg',
    alt: '示例图片3',
  },
];

const BannerCarousel: React.FC = () => {
  const [current, setCurrent] = useState(0);
  const timerRef = useRef<number | null>(null);

  useEffect(() => {
    timerRef.current = setInterval(() => {
      setCurrent((prev) => (prev + 1) % banners.length);
    }, 4000);
    return () => {
      if (timerRef.current) clearInterval(timerRef.current);
    };
  }, []);

  const goTo = (idx: number) => setCurrent(idx);
  const prev = () => setCurrent((prev) => (prev - 1 + banners.length) % banners.length);
  const next = () => setCurrent((prev) => (prev + 1) % banners.length);

  return (
    <div className="banner-carousel">
      <img
        src={banners[current].img}
        alt={banners[current].alt}
        className="banner-img"
      />
      <button className="arrow left" onClick={prev}>&lt;</button>
      <button className="arrow right" onClick={next}>&gt;</button>
      <div className="dots">
        {banners.map((_, idx) => (
          <span
            key={idx}
            className={idx === current ? 'dot active' : 'dot'}
            onClick={() => goTo(idx)}
          />
        ))}
      </div>
    </div>
  );
};

export default BannerCarousel;